import React, { Component } from 'react'
import { Button, Checkbox, Table, Pagination, Switch, Tooltip } from 'antd'
import 'antd/dist/antd.css';
import { MoreOutlined } from '@ant-design/icons';
import { Recoverable } from 'repl';


interface DataType {
    key: React.Key;
    code: string;
    name: string;
    DCName: string;
    Upcode: string;
    Upname: string;
    state: string;
  }
//#region 数据
const data:DataType[] = [
    {
        key: 0,
        code: "01",
        name: "正常仓",
        DCName: "[1111]佛山徐福记-测试",
        Upcode: "<空>",
        Upname: "<空>",
        state: "1"
    },
    {
        key: 1,
        code: "02",
        name: "报废仓",
        DCName: "[2222]佛山徐福记-测试",
        Upcode: "<空>",
        Upname: "<空>",
        state: "1"
    },
    {
        key: 2,
        code: "03",
        name: "拆零仓",
        DCName: "[3333]佛山徐福记-测试",
        Upcode: "<空>",
        Upname: "<空>",
        state: "1"
    },
    {
        key: 3,
        code: "04",
        name: "整件仓",
        DCName: "[4444]佛山徐福记-测试",
        Upcode: "<空>",
        Upname: "<空>",
        state: "1"
    },
    {
        key: 4,
        code: "05",
        name: "退货仓",
        DCName: "[5555]佛山徐福记-测试",
        Upcode: "<空>",
        Upname: "<空>",
        state: "1"
    },
    {
        key: 5,
        code: "06",
        name: "物流仓",
        DCName: "[6666]佛山徐福记-测试",
        Upcode: "<空>",
        Upname: "<空>",
        state: "1"
    }
]
const layout = {
    marginLeft: 30,
    marginRight: 30
}
//#endregion
//表格样式
const tableLayout = {
    rowSelection: Checkbox
}
//#region 表头

//#endregion
const rowSelection={
    onChange:(SelectedRowKeys:React.Key[],selectedRowKeys:DataType[]) => {

    }
}
export default class OpenBush extends Component {
    constructor(props:any) {
        super(props);
    }
    props={
        chanceAction:(action:any,data:any) => {},
       
    }
    chanceAction = (record:any) =>{
        this.props.chanceAction("detail",record);
        
    }
    addWarehouse = (record:any) => {
        this.props.chanceAction('new',record)
    }
    columns = [
        {
            title: '代码',
            dataIndex: 'code',
            key: 'code',
            sorter: {
                compare: (a:any, b:any) => a.code - b.code,
                multiple: 1,
            },
            render: (text:any,record:any) => <a onClick={()=>this.chanceAction(record)}>{text}</a>
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '配送中心',
            dataIndex: 'DCName',
            key: 'DCName',
            ellipsis: {
                showTitle: false,
            },
            render: (DCName:any) => (
                <Tooltip placement="top" title={DCName}>
                    {DCName}
                </Tooltip>
            )
        },
        {
            title: '上游仓位代码',
            dataIndex: 'Upcode',
            key: 'Upcode'
        },
        {
            title: '上游仓位名称',
            dataIndex: 'Upname',
            key: 'Upname',
            ellipsis: true,
    
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
            render: (text:any, record:any) => {
                return <Switch
                    checkedChildren="开启"
                    unCheckedChildren="禁用"
                    defaultChecked={text ? true : false}
                />
            }
        },
        {
            title: '操作',
            key: 'anction',
            render: (text:any, record:any) => {
                return (
                    <div>
                        <a onClick={()=>this.chanceAction(record)}>查看</a>
                        &nbsp;&nbsp;&nbsp;
                        <Tooltip placement='bottomLeft' title={<a  onClick={()=>this.addWarehouse(record)}>编辑</a>} color="white">
                            <MoreOutlined  />
                        </Tooltip>
                    </div>
                )
            }
        },
    
    ]
   
    render() {
        return (
            <>
                <div style={{ ...layout }}>
                    <div >
                        <br />
                        <Button htmlType="button" >批量启用</Button>&nbsp;&nbsp;
                        <Button htmlType="button">批量禁用</Button>
                    </div>
                    <div >
                        <br />
                        <Table
                            scroll={{ y: 200 }}
                            columns={this.columns}
                            dataSource={data}
                            pagination={false}
                            rowSelection={rowSelection}
                        >
                        </Table>
                        <br />
                        <Pagination size="small" total={50} showSizeChanger showQuickJumper style={{ float: 'right' }} />
                    </div>
                </div>
            </>
        )
    }
}
